<script setup lang="ts">
import { Delivery } from '../delivery';
import { Icons } from '../icons';
import Input from '../input/input.vue';
import Select from '../input/select.vue';
import SelectSize from '../input/selectSize.vue';
import Textarea from '../input/textarea.vue';
import { Start } from '../start';
import { Upload } from '../upload';
import Choose from './Choose.vue';

const { isMobile } = getIsMobile()
withDefaults(defineProps<{
    from?: 'shoppingCart' | 'detail'
    deliveryType?: number
    showChoose?: boolean
    register_title?: string
    register_foot_title?: string
    register_foot_describeribe?: string
    register_foot_email?: string
    register_foot_phone?: string
}>(), {
    showChoose: true,
    deliveryType: 1,
    from: 'detail',
    register_title: '',
    register_foot_title: '',
    register_foot_describeribe: '',
    register_foot_email: '',
    register_foot_phone: ''
})
</script>

<template>
    <v-form @submit.prevent class="md:px-4 pt-10! pb-6 md:pt-[0]! md:w-[85%] mr-auto!">
        <div class="bg-[#1D498C] text-5 text-white text-center py-3 mb-4">
            Free Design Quote and Shipping
        </div>
        <div class="md:w-[100%] mx-auto">
            <div class="px-[24px]!" v-if="from === 'detail' && isMobile">
                <Select active variant="solo" label="Seleect a Cuslom product" />

            </div>
            <div v-if="from === 'detail' && isMobile">
                <Input active variant="solo" label="Name" required />
                <Input active variant="solo" label="Email" required />
            </div>

            <div class="flex">
                <div class="flex-1 w-0">
                    <Input active variant="solo" label="Name" required />
                </div>
                <div class="flex-1 w-0 ml-5" v-if="!isMobile">
                    <Input active variant="solo" label="Email" required />
                </div>
            </div>
            <div class="flex">
                <div class="flex-1 w-0">
                    <Input active variant="solo" label="Phone" />
                </div>
                <div class="flex-1 w-0 ml-5" v-if="!isMobile">
                    <Select active variant="solo" label="Seleect a Cuslom product" />
                </div>
            </div>
            <Choose v-if="showChoose" />
            <SelectSize active variant="solo" label="Choose Quantity （No Minimum）" />
            <div class="bg-white w-full items-center justify-between  v-card--variant-elevated mb-4">
                <div class="bg-[#1D498C] rounded-t-[2px] px-6 py-[7px]" v-if="false">
                    <div class="text-center text-xs font-medium text-white">
                        <div>
                            <div>
                                <p>TOTAL PRICE</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rounded-b-[2px] border-2 border-solid border-t-2 px-4 py-2 border-[#1D498C]">
                    <div class="flex min-h-[60px] w-full items-center justify-between space-x-4">
                        <div class="flex items-center space-x-5 font-bold">
                            TOTAL PRICE
                        </div>
                        <div class="flex items-center space-x-5">
                            <div class="text-left!">
                                <p
                                    class="text-lg font-bold text-[rgba(35,35,35,0.64)] line-through md:text-base xl:text-lg">
                                    $213.00
                                </p>
                                <p
                                    class="text-sm leading-[1.1] text-[rgba(35,35,35,0.64)] line-through md:text-xs xl:text-sm ">
                                    $2.13
                                    per
                                    item
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="relative text-[9px] sm:text-[11px] w-[75px]">
                                <img class="w-full" src="/50-percent.png" alt="Discount" width="75px" height="75px">
                                <div class="absolute inset-0 flex flex-col items-center justify-center text-white">
                                </div>
                            </div>
                            <div class="text-left!">
                                <p class="text-6 font-bold text-[#11A66A] md:text-base xl:text-lg">$106.50</p>
                                <p class="text-xs leading-[1.1] md:text-xs xl:text-sm">$1.07 per item</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Upload active variant="solo" label="Border & Edge" />
            <!-- <Upload active variant="solo" label="Border & Edge" /> -->
            <Textarea active variant="solo" label="Border & Edge"
                placeholder="Enter notes (material requests, design needs, expedited orderetc.):" />
            <v-btn elevation="0" color="#39c464" class="w-full! mb-4 text-white" v-if="from === 'shoppingCart'">
                Next
            </v-btn>
            <template v-if="from === 'detail'">
                <v-btn elevation="0" color="#39c464" class="w-full! mb-4 text-white">
                    Continue
                </v-btn>
                <!-- <v-btn elevation="0" color="#1C498B" class="w-full! mb-2">
                    CET FREE DESICN
                </v-btn> -->
                <Delivery class="mt-2 mb-4" :type="deliveryType" />
                <v-btn class="text-none w-full mb-4! " color="#1C498B" rounded="0">
                    View Order summary <i class="iconfont icon-xiazai"></i>
                </v-btn>
                <v-card class="px-3! py-5!">
                    <!-- <div class="flex mb-2">
                        <img src="/handshake.png" alt="" srcset="" class="w-12 h-12 mr-2" />
                        <div class="text-3 text-gray-600 md:text-[14px]!">
                            <h1 class="inline-bold text-3 md:text-[14px]!">
                                {{ register_foot_title }}
                            </h1>
                            {{ register_foot_describeribe }}
                        </div>
                    </div>

                    <v-btn elevation="0" color="#39c464" class="text-white! w-full! mb-2">
                        REACH OUT & GET A QUOTE
                    </v-btn> -->
                    <v-row no-gutters class="text-3! md:text-[16px]! mb-2">
                        <v-col cols="7" sm="7">
                            <div class="flex">
                                Email:
                                {{ register_foot_email }}
                            </div>
                        </v-col>
                        <v-col cols="5" sm="5" class="text-right">
                            Call: {{ register_foot_phone }}
                        </v-col>
                    </v-row>
                    <v-row no-gutters class="text-3! md:text-[16px]!">
                        <v-col cols="7" sm="7" class="flex items-center!">
                            <div class="flex">
                                Excellent:
                                <Start />
                            </div>
                        </v-col>
                        <v-col cols="5" sm="5" class="text-right ">
                            <div class="flex items-center! justify-end!">
                                4.9 out of 5
                                <Icons name="icon-trustpilot_" class="w-[15px] h-[15px] relative -top-[2px] ml-[5px]" />
                                Turstpilot
                            </div>
                        </v-col>
                    </v-row>
                </v-card>
            </template>
        </div>
    </v-form>
</template>

<style scoped lang="scss">
:deep(.v-btn) {
    height: calc(var(--v-btn-height) + 5px) !important;
}

:deep(.v-btn__content) {
    font-size: 1rem !important;
    font-weight: bold !important;
}
</style>